<div class="d-flex justify-content-center">
  <div class="col-8">
    <form name="editForm" novalidate (ngSubmit)="save()" [formGroup]="editForm">
      <h2
        id="jhi-operation-heading"
        data-cy="OperationCreateUpdateHeading"
        jhiTranslate="jhipsterSampleApplicationApp.operation.home.createOrEditLabel"
      >
        Create or edit a Operation
      </h2>

      <div>
        <jhi-alert-error />

        @if (editForm.controls.id.value !== null) {
          <div class="mb-3">
            <label class="form-label" for="field_id" jhiTranslate="jhipsterSampleApplicationApp.operation.id">ID</label>
            <input type="number" class="form-control" name="id" id="field_id" data-cy="id" formControlName="id" [readonly]="true" />
          </div>
        }

        @let dateRef = editForm.get('date')!;
        <div class="mb-3">
          <label class="form-label" for="field_date" jhiTranslate="jhipsterSampleApplicationApp.operation.date">Date</label>
          <div class="d-flex">
            <input
              id="field_date"
              data-cy="date"
              type="datetime-local"
              class="form-control"
              name="date"
              formControlName="date"
              placeholder="YYYY-MM-DD HH:mm"
            />
          </div>
          @if (dateRef.invalid && (dateRef.dirty || dateRef.touched)) {
            <div>
              @if (editForm.get('date')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">This field is required.</small>
              }
              <small
                class="form-text text-danger"
                [hidden]="!editForm.get('date')?.errors?.datetimelocal"
                jhiTranslate="entity.validation.datetimelocal"
                >This field should be a date and time.</small
              >
            </div>
          }
        </div>

        <div class="mb-3">
          <label class="form-label" for="field_description" jhiTranslate="jhipsterSampleApplicationApp.operation.description"
            >Description</label
          >
          <input
            type="text"
            class="form-control"
            name="description"
            id="field_description"
            data-cy="description"
            formControlName="description"
          />
        </div>

        @let amountRef = editForm.get('amount')!;
        <div class="mb-3">
          <label class="form-label" for="field_amount" jhiTranslate="jhipsterSampleApplicationApp.operation.amount">Amount</label>
          <input type="number" class="form-control" name="amount" id="field_amount" data-cy="amount" formControlName="amount" />
          @if (amountRef.invalid && (amountRef.dirty || amountRef.touched)) {
            <div>
              @if (editForm.get('amount')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">This field is required.</small>
              }
              <small
                class="form-text text-danger"
                [hidden]="!editForm.get('amount')?.errors?.number"
                jhiTranslate="entity.validation.number"
                >This field should be a number.</small
              >
            </div>
          }
        </div>

        <div class="mb-3">
          <label class="form-label" for="field_bankAccount" jhiTranslate="jhipsterSampleApplicationApp.operation.bankAccount"
            >Bank Account</label
          >
          <select
            class="form-control"
            id="field_bankAccount"
            data-cy="bankAccount"
            name="bankAccount"
            formControlName="bankAccount"
            [compareWith]="compareBankAccount"
          >
            <option [ngValue]="null"></option>
            @for (bankAccountOption of bankAccountsSharedCollection(); track $index) {
              <option [ngValue]="bankAccountOption">{{ bankAccountOption.name }}</option>
            }
          </select>
        </div>

        <div class="mb-3">
          <label for="field_labels" jhiTranslate="jhipsterSampleApplicationApp.operation.label">Label</label>
          <select
            class="form-control"
            id="field_labels"
            data-cy="label"
            multiple
            name="labels"
            formControlName="labels"
            [compareWith]="compareLabel"
          >
            @for (labelOption of labelsSharedCollection(); track $index) {
              <option [ngValue]="labelOption">{{ labelOption.label }}</option>
            }
          </select>
        </div>
      </div>

      <div>
        <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
          <fa-icon icon="ban" />&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
        </button>

        <button
          type="submit"
          id="save-entity"
          data-cy="entityCreateSaveButton"
          [disabled]="editForm.invalid || isSaving"
          class="btn btn-primary"
        >
          <fa-icon icon="save" />&nbsp;<span jhiTranslate="entity.action.save">Save</span>
        </button>
      </div>
    </form>
  </div>
</div>
